<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:54:06
 * @LastEditors: delin66
 * @LastEditTime: 2025-05-04 15:35:20
 * @Descripttion:
-->
<template>
  <div class="container">
    <el-menu
        :default-active="activeIndex"
        class="nav"
        mode="vertical"
        background-color="#194E87"
        text-color="#e6f7ff"
        active-text-color="#ffffff"
        @select="handleSelect"
    >
      <template v-for="(item, index) in navList" :key="item.path">
        <!-- 没有子菜单 -->
        <el-menu-item
            v-if="!item.children || item.children.length === 0"
            :index="item.path"
            style="font-size: 16px; font-weight: bold"
            :class="item.path == activeIndex ? 'active' : '' "
        >
         {{ item.title }}
        </el-menu-item>

        <!-- 有子菜单 -->
        <el-sub-menu v-else :index="item.path">
          <template #title><span style="font-size: 16px; font-weight: bold">{{ item.title }}</span></template>
          <el-menu-item
              v-for="sub in item.children"
              :key="item.path + sub.path"
              :index="item.path + sub.path"
              style="font-size: 16px; font-weight: bold"
              :class="(item.path + sub.path) == activeIndex ? 'active' : '' "
          >
            {{ sub.title }}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const activeIndex = ref<string>('kjy-data-fill');

const navList = ref([
  // {title:'企业活动',path:'/enterprise-service/foster/enterprise-activity'},
  { title: '大学科技园数据填报', path: 'kjy-data-fill' },
  { title: '众创空间数据填报', path: 'zhongchuang-data-fill'},
  { title: '科技企业孵化器数据填报',
    path: '/personal-center/fill-information',
    children: [
      { title: '年报', path: '/hatch-yeardata-fill' },
      { title: '季报', path: '/hatch-quarterdata-fill' },
    ],
  },
  { title: '填报记录', path: 'my-datafrom' },
  { title: '我的奖项', path: 'my-award' },
  { title: '我的知识产权', path: 'my-patent' },
  { title: '我的校企合作', path: 'my-cooperate' },
  { title: '我的资质', path: 'my-qualification' },
  // { title: '我的高企认定入库申请', path: 'my-application' },
  //   { title: '高企入库申请', path: 'storage-application' },
  // { title: '中小企业入库申请', path: 'storage-application-small' }
]);

const handleSelect = (key: string, keyPath: string[]) => {
  // 如果是相对路径，需要拼接完整路径
  if (!key.startsWith('/')) {
    router.push(`/personal-center/fill-information/${key}`);
  } else {
    router.push(key);
  }
};

// 控制nav是否显示

const curPath = computed(() => {
  return route.path;
});
watch(
    curPath,
    () => {
      // 正确显示当前显示的nav
      // 从完整路径中提取相对路径部分
      const fullPath = route.path;
      const basePath = '/personal-center/fill-information/';
      if (fullPath.startsWith(basePath)) {
        activeIndex.value = fullPath.replace(basePath, '');
      } else {
        activeIndex.value = fullPath;
      }
    },
    {
      immediate: true,
    }
);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
}

.active{
  background-color: #003B7A !important;
}

.nav {
  width: 25%;
  //background-color: #545c64;
  //.el-menu-item.is-active {
  //  border-left: 4px solid #ffd04b;
  //}
}
</style>
